<template>
  <Modal v-model="isOpen" title="编辑角色" width="640px" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <Form ref="user" :model="user" :label-width="80">
      <FormItem label="用户角色" prop="role_id">
        <RadioGroup v-model="user.role_id" v-for="(role,idx) in roleOpts" :key="idx">
          <Radio :label="role.value">{{role.text}}</Radio>
        </RadioGroup>
      </FormItem>
    </Form>
    <Spin size="large" fix v-if="isShowSpin"></Spin>
  </Modal>
</template>

<script>
  import user from '@/models/setting/sys/user'
  import role from '@/models/setting/sys/role'

  export default {
    name: 'edit-user',
    props: ['params'],
    data () {
      return {
        isOpen: true,
        loading: true,
        isShowSpin: true,
        user: {
          name: '',
          account: '',
          password: '',
          password2: '',
          role_id: '',
          email: '',
          mobile: '',
          tel: '',
          status: null
        },
        roleOpts: [],
        statusOptions: [{
          value: 1,
          text: '正常'
        }, {
          value: 0,
          text: '关闭'
        }]
      }
    },
    mounted () {
      this.load()
      setTimeout(() => {
        this.isShowSpin = !this.isShowSpin
      }, 300)
      role.gets().then(r => {
        if (r.code === 200) {
          this.roles = r.roles
          if (this.roles.length > 0) {
            this.roles.forEach((role) => {
              this.roleOpts.push({
                value: role.id,
                text: role.name
              })
            })
          }
        } else {
          this.$Message.warning({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
    },
    methods: {
      load () {
        user.get(this.params.id).then(r => {
          if (r.code === 200) {
            this.user = r.user
          } else {
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      ok () {
        user.edit(this.user).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
